<template>
  <div>
    <!-- 页头 -->
    <el-row :gutter="10">
      <el-col
        :span="2"
        style="position:absolute; padding-top:20px;padding-left:30px;">
        <el-button type="primary" plain icon="el-icon-arrow-left">返回</el-button>
      </el-col>
      <el-col :span="20" style="position:relative;left:150px;top:10px;">
        <div><h3>员工评价</h3></div>
      </el-col>
    </el-row>
    <!-- 员工列表 -->
    <el-row style="margin-top:20px;" :gutter="20">
      <el-col :span="7" style="margin-top:30px;margin-left:40px;" v-for="(item,index) in evaluationList" :key="index">
         <el-card class="box-card" shadow="always">
           <div slot="header" class="clearfix">
             <span style="float:left;"><b>{{item.name}}</b></span>
             <el-button style="float: right; padding: 3px 0" type="text" @click="toEvaluate(item.employeeId)">去评价</el-button>
           </div>
           <div class="text item">
             <span>员工ID</span>
             <span style="float:right">{{item.employeeId}}</span>
           </div>
            <div  class="text item">
             <span>职务</span>
             <span style="float:right">{{item.position}}</span>
           </div>
            <div class="text item">
             <span>入职时间</span>
             <span style="float:right">{{item.entryTime}}</span>
           </div>
            <div class="text item">
             <span>上次评价</span>
             <span style="float:right">{{item.lastEvaluate}}</span>
           </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getEvaluationList} from '@/api/evaluation'

export default {
  data()  {
    return {
      evaluationList:[],
    }
  },
  mounted(){
    this.getEvaluationList()
  },
  methods:{
    async getEvaluationList(){
      const res =await getEvaluationList()
      if(res.code===200){
        console.log(res)
        this.evaluationList=res.data.evaluationList
      }
    },
    toEvaluate(employeeId){
      this.$router.push({
        name:'EvaluationDetails',
        params:{employeeId}
      })
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
  border-bottom:1px solid #EBEEF5;
}
.box-card{
  border-top:#409EFF 5px solid
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>